<template>
  <div class="page">
    <h2>AI 对话助手</h2>
    <div class="chat-box">
      <div
        v-for="message in messages"
        :key="message.id"
        :class="['message-container', message.isUser ? 'user' : 'ai']"
      >
        <img
          :src="message.isUser ? userAvatar : aiAvatar"
          alt="avatar"
          class="avatar"
        />
        <div class="message-content">
          <span class="nickname">{{ message.isUser ? '我' : 'AI 机器人' }}</span>
          <div :class="['message', message.isUser ? 'user' : 'ai']">
            <p>{{ message.text }}</p>
          </div>
        </div>
      </div>
    </div>
    <el-input
      v-model="userInput"
      placeholder="输入你的问题..."
      @keyup.enter="sendMessage"
      clearable
      class="input-field"
    />
    <el-button type="primary" @click="sendMessage" class="send-button">
      发送
    </el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useChatStore } from '@/stores/chatStore';

// 使用 import 方式引入本地图片资源
import userAvatar from '@/assets/我.png';
import aiAvatar from '@/assets/AI.png';

export default defineComponent({
  setup() {
    const userInput = ref('');
    const chatStore = useChatStore();
    const messages = chatStore.messages;

    // 发送消息
    const sendMessage = () => {
      if (userInput.value.trim()) {
        // 添加用户消息
        chatStore.addUserMessage(userInput.value);
        // 获取 AI 响应
        chatStore.fetchAiResponse(userInput.value);
        userInput.value = '';
      } else {
        alert('请输入信息');
      }
    };

    // 在组件挂载时自动发送欢迎消息
    onMounted(() => {
      chatStore.addAiMessage('我是您的AI助手，有什么不懂的问题尽管问我吧！');
    });

    return {
      userInput,
      messages,
      sendMessage,
      userAvatar,  // 用户头像
      aiAvatar,    // AI 头像
    };
  },
});
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  background-color: #ffffff; /* 保持白色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 20px;
}

.chat-box {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.nickname {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 3px;
}

.message {
  padding: 10px;
  border-radius: 12px;
  word-wrap: break-word;
  animation: fadeIn 0.3s ease-in-out;
}

.message.user {
  background-color: #0084ff;
  color: white;
  align-self: flex-end;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.ai {
  background-color: #f1f1f1;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.input-field {
  width: 100%;
  max-width: 600px;
  margin-bottom: 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.send-button {
  width: 100%;
  max-width: 150px;
  background-color: #28a745;
  color: white;
  border-radius: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.send-button:hover {
  background-color: #218838;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>